<template>
    <el-dialog
      title="添加工资"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="true"
      @close="handleDialogClose"
      :modal-append-to-body="false"
    >
      <el-form :model="formData" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="记录日期" prop="recordDate" style="text-align: left;">
          <el-date-picker v-model="formData.recordDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="总工资" prop="allWages">
          <el-input v-model="formData.allWages" type="number"></el-input>
        </el-form-item>
        <el-form-item label="应发工资" prop="shouldWages">
          <el-input v-model="formData.shouldWages" type="number"></el-input>
        </el-form-item>
        <el-form-item label="实发工资" prop="actualWages">
          <el-input v-model="formData.actualWages" type="number"></el-input>
        </el-form-item>
        <el-form-item label="工资系数" prop="coefficient">
          <el-input v-model="formData.coefficient" type="number"></el-input>
        </el-form-item>
        <el-form-item label="基本工资" prop="basicWages">
          <el-input v-model="formData.basicWages" type="number"></el-input>
        </el-form-item>
        <el-form-item label="绩效工资" prop="performanceWages">
          <el-input v-model="formData.performanceWages" type="number"></el-input>
        </el-form-item>
        <el-form-item label="社保" prop="socialSecurity">
          <el-input v-model="formData.socialSecurity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="公积金" prop="accumulationFund">
          <el-input v-model="formData.accumulationFund" type="number"></el-input>
        </el-form-item>
      </el-form>
  
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      }
    },
    data() {
      return {
        dialogVisible: this.visible,
        formData: {
          name: '',
          recordDate: '',
          allWages: '',
          shouldWages: '',
          actualWages: '',
          coefficient: '',
          basicWages: '',
          performanceWages: '',
          socialSecurity: '',
          accumulationFund: ''
        },
      };
    },
    watch: {
      visible(value) {
        this.dialogVisible = value;
      }
    },
    methods: {
      handleDialogClose() {
        this.dialogVisible = false;
        this.resetForm();
        this.$emit('update:visible', false);
      },
      async handleSubmit() {
        try{
            // 将日期格式化为 yyyy-MM-dd
            this.formData.recordDate = this.formatDate(new Date(this.formData.recordDate));
            const response = await this.$axios.post('/wages/add',this.formData, {
            headers: {
                'satoken': localStorage.getItem('satoken'),
                'Content-Type': 'application/json',
            }
        });
            if (response.data.success) {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                // 提交完成后关闭弹窗
                this.dialogVisible = false;
                this.resetForm();
                // 触发自定义事件，通知父组件刷新列表
                this.$emit('refreshList');
            } else {
                this.$message.error(response.data.msg || '提交失败');
            }
        }catch(error){
            console.error('Error submitting data:', error);
            this.$message.error('提交失败，请重试');
        }
        
      },
      // 格式化日期
    formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
    },
      resetForm() {
        // 清空表单数据
        this.formData = {
          name: '',
          recordDate: '',
          allWages: '',
          shouldWages: '',
          actualWages: '',
          coefficient: '',
          basicWages: '',
          performanceWages: '',
          socialSecurity: '',
          accumulationFund: ''
        };
      }
    }
  };
  </script>
  
  <style scoped>

  </style>
  